<template>
    <div style="height:100%;width:100%;position:relative;" ref="maindev">
        <div class="pagetop">
            <div style="width: 100%;" ref="buttondiv">
                <table>
                    <tr>
                        <td width="80" align="right">条码号</td>
                        <td width="268px">
                            <el-input v-model="searchParam.barcode" @keyup.enter.native="btn_queryEvent(1)" clearable
                                style="width: 268px;"></el-input>
                        </td>
                        <td width="50" align="right">病历号</td>
                        <td width="130px">
                            <el-input size="small" v-model="searchParam.pat_no" clearable style="width: 130px;"></el-input>
                        </td>
                        <td width="50" align="right">病人ID</td>
                        <td width="130px">
                            <el-input size="small" v-model="searchParam.pat_id" clearable style="width: 150px;"
                                placeholder="请输入病人ID"></el-input>
                        </td>
                        <td width="50" align="right">工作组</td>
                        <td>
                            <rm-ddl-common :appendtobody="true" datatype="labgroup" v-model="searchParam.labgroupid"
                                width="155px"></rm-ddl-common>
                        </td>
                        <td width="50" align="right">姓名</td>
                        <td width="130px">
                            <el-input size="small" v-model="searchParam.pat_name" clearable
                                style="width: 130px;"></el-input>
                        </td>
                        <td></td>
                    </tr>
                    <tr>
                        <td width="80" align="right" class="search-time">
                            <el-select v-model="searchParam.datekind" placeholder="请选择">
                                <el-option v-for="item in dataOptions" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </td>
                        <td>
                            <el-date-picker v-model="searchParam.startdate" type="date" placeholder="开始日期"
                                value-format="yyyy-MM-dd" style="width:125px">
                            </el-date-picker> 至
                            <el-date-picker v-model="searchParam.enddate" type="date" placeholder="结束日期"
                                value-format="yyyy-MM-dd" style="width:125px">
                            </el-date-picker>
                        </td>
                        <td width="50" align="right">报告单元</td>
                        <td width="160">
                            <rm-ddl-rptunit prgno="LIS219" v-model="searchParam.rptunitid" clearable
                                width="130px"></rm-ddl-rptunit>
                        </td>
                        <td width="50" align="right">状态</td>
                        <td width="150">
                            <div>
                                <el-radio-group v-model="searchParam.qstat" size="mini">
                                    <el-radio label="1">签收</el-radio>
                                    <el-radio label="2">超时</el-radio>
                                    <el-radio label="A">所有</el-radio>
                                </el-radio-group>
                            </div>
                        </td>
                        <td align="right">申请科室</td>
                        <td width="130px">
                            <rm-ddl-common datatype="dept" dataname="科室" v-model="searchParam.reqdeptno"
                                width="155px"></rm-ddl-common>
                        </td>
                        <td width="50" align="right">回执单号</td>
                        <td>
                            <el-input size="small" v-model="searchParam.collectbarcode" clearable
                                style="width: 130px;"></el-input>
                        </td>
                    </tr>
                    <tr>
                        <td width="50" align="right">送检医院</td>
                        <td width="268px">
                            <rm-ddl-common datatype="hospital" dataname="医院" v-model="searchParam.hospcode"
                                width="100%"></rm-ddl-common>
                        </td>
                        <td colspan="10" align="right">
                            <el-button icon="el-icon-search" v-has="'PINQUERY'" type="primary"
                                @click="btn_queryEvent(1)">查询</el-button>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <div id="pagecenter" class="pagecenter">
            <div class="center-content">
                <table cellPadding="2">
                    <template v-if="tableList.length > 0">
                        <div class="table-item" v-for="(item, idx) in tableList" :key="idx"
                            :class="idx == selIdx ? 'item-select' : ''" @click="chooseItem(idx)"
                            @dblclick="showDetails(item)">
                            <tr>
                                <td colspan="2">{{ item.barcode }}</td>
                                <template v-for="(stepitem, j) in item.steplist">
                                    <td colspan="2" :key="'user' + j"><span class="item-text">{{ stepitem.user }}</span></td>
                                </template>
                                <td width="100">{{ item.req_bedno }}</td>
                                <td rowspan="4" width="210">{{ item.sample_items }}</td>
                                <td></td>
                            </tr>
                            <tr class="item-middle">
                                <td width="80">{{ item.pat_name }}</td>
                                <td width="40">{{ item.pat_sex }}</td>
                                <template v-for="(stepitem, j) in item.steplist">
                                    <template v-if="j == 0">
                                        <td width="130" :key="'stepitem' + j"
                                            :class="!stepitem.time && !stepitem.user ? 'grey-color' : ''">
                                            <span class="cricle"
                                                :class="!stepitem.time && !stepitem.user ? 'item-color' : ''"></span>
                                            <span>{{ stepitem.name }}</span>
                                        </td>
                                    </template>
                                    <template v-else>
                                        <td width="40" class="line-style" :key="'stepitem' + j">— —<i class="right"></i>
                                        </td>
                                        <td width="130" :key="'stepitem1' + j"
                                            :class="!stepitem.time && !stepitem.user ? 'grey-color' : ''">
                                            <span class="cricle"
                                                :class="!stepitem.time && !stepitem.user ? 'item-color' : ''"></span>
                                            <span>{{ stepitem.name }}</span>
                                        </td>
                                    </template>
                                </template>
                                <td></td>
                                <td style="font-size: 12px;" width="80">{{ item.deptname }}</td>
                            </tr>
                            <tr>
                                <td>{{ item.pat_no }}</td>
                                <td align="right">{{ item.pat_agestr }}</td>
                                <template v-for="(stepitem, j) in item.steplist">
                                    <td colspan="2" :key="'time' + j"><span class="item-text">{{ stepitem.time }}</span></td>
                                </template>
                                <td>{{ item.req_groupna }}</td>
                            </tr>
                            <tr>
                                <td :colspan="(item.steplist.length + 1) * 2">{{ item.rpt_info }}</td>
                                <td>{{ item.specimen_name }}</td>
                            </tr>
                            <tr></tr>
                        </div>
                    </template>
                    <template v-else>
                        <tr>暂无数据</tr>
                    </template>
                </table>
                <div style="text-align: center;">
                    <el-pagination layout="prev, pager, next" :page-size="pageSize" :total="totalNum"
                        @current-change="pageChange"></el-pagination>
                </div>
            </div>
        </div>
        <el-dialog title="申请单日志" width="80%" :visible.sync="dialogVisible">
            <div style="height: 500px;">
                <rm-reqlog :reqlogList="tableDatalog" :reqstatOption="reqstatOption" style="height: 100%;"></rm-reqlog>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import XEUtils from "xe-utils"; //引入工具类
import RmReqlog from "@/components/rmcompents/rmreq/rm_reqlog.vue";
export default {
    name: "LIS219",
    components: {
        RmReqlog
    },
    data() {
        return {
            dataOptions: [
                {
                    value: "1",
                    label: "报告日期"
                },
                {
                    value: "2",
                    label: "条码生成日期"
                },
                {
                    value: "3",
                    label: "签收日期"
                }
            ],
            searchParam: {
                datekind: "2",
                startdate: XEUtils.toDateString(new Date(), "yyyy-MM-dd"),
                enddate: XEUtils.toDateString(new Date(), "yyyy-MM-dd"),
                qstat: "A",
                rptunitid: "",
                hospcode: "",
            },
            tableList: [],
            greyColor: false,
            selIdx: 0,
            dialogVisible: false,
            currentPage: 1,
            pageSize: 20,
            totalNum: 0,
            tableDatalog: [],
            loadinglog: false,
            reqstatOption: [],
        };
    },
    mounted() {
        this.initData();
    },
    methods: {
        initData() {
            this.$tool
                .request({
                    url: "LIS/LIS2/LIS219",
                    method: "post",
                    data: {
                        action: "initdata",
                    }
                })
                .then(response => {
                    if (response.reqstat && response.reqstat.length > 0) {
                        // let temp = [];
                        response.reqstat.forEach((item, index) => {
                            this.reqstatOption.push(item);
                            // if (index % 4 == 0) {
                            //     if (temp.length > 0) {
                            //         this.reqstatOption.push(temp);
                            //         temp = [];
                            //         temp.push(item);
                            //     } else {
                            //         temp.push(item);
                            //     }
                            // } else {
                            //     if (index == response.length - 1) {
                            //         temp.push(item);
                            //         this.reqstatOption.push(temp);
                            //     } else {
                            //         temp.push(item);
                            //     }
                            // }
                        });
                        this.reqstatOption.push({ data: "报告日志", display: "报告日志", inputcode: "BGRZ" });
                        this.reqstatOption.push({ data: "-43", display: "无纸化", inputcode: "WZH" });
                        this.reqstatOption.push({ data: "无纸化", display: "无纸化", inputcode: "WZH" });
                        // console.log(this.reqstatOption);
                    } else {
                        this.reqstatOption = [];
                    }
                    if (response.secHospCode) {
                        this.searchParam.hospcode = response.secHospCode;
                    }
                })
                .catch(e => { });
        },
        btn_queryEvent(type) {
            this.$tool
                .request({
                    url: "LIS/LIS2/LIS219",
                    method: "post",
                    data: {
                        action: "querydata",
                        q: this.searchParam,
                        pageSize: this.pageSize,
                        currentPage: type == 1 ? 1 : this.currentPage
                    }
                })
                .then(response => {
                    // if(response.errcode == 1) {
                    if (response.data.length > 0) {
                        this.tableList = response.data;
                    } else {
                        this.tableList = [];
                    }
                    this.totalNum = response.Count;
                })
                .catch(e => { });
        },
        chooseItem(idx) {
            this.selIdx = idx;
        },
        showDetails(item) {
            console.log(item);
            // this.dialogVisible = true;
            // this.$tool
            //     .request({
            //         url: "LIS/LIS2/LIS219",
            //         method: "post",
            //         data: {
            //             // action: "querydate",
            //             barcode: item.barcode
            //         }
            //     })
            //     .then(response => {
            //         // if(response.errcode == 1) {
            //         if( response.length > 0) {
            //             this.tableList = response;
            //             this.dialogVisible = true;
            //         } else {
            //             this.tableList = [];
            //         }
            //     })
            //     .catch(e => { });
            this.queryLog(item.barcode);
        },
        queryLog(barcode) {
            this.loadinglog = true;
            this.$tool
                .request({
                    url: "LIS/LIS4/LIS430",
                    method: "post",
                    data: {
                        action: "querylog",
                        barcode: barcode,
                    },
                })
                .then((res) => {
                    this.tableDatalog = this.DealLog(res);
                    this.dialogVisible = true;
                    this.loadinglog = false;
                })
                .catch((err) => {
                    this.loadinglog = false;
                });
        },
        DealLog(res) {
            var data = res.Data.Data;
            var rptlogdt = res.reportlogdt;
            var bactlogdt = res.bactlogdt;
            var redata = [];
            for (let i = 0; i < data.length; i++) {
                if (data[i].reportid) {
                    var children = rptlogdt.filter((item) => item.reportid == data[i].reportid);
                    if (children.length > 0) data[i].children = children;
                }
                if (data[i].sampleid && data[i].trans_type == '-43') {
                    if (bactlogdt && bactlogdt.length > 0) {
                        data[i].children = bactlogdt;
                    }
                }
                redata.push(data[i]);
            }
            // console.log("redata",redata);
            return redata;
        },
        pageChange(e) {
            console.log(e);
            this.currentPage = e;
            this.btn_queryEvent();
            document.getElementById("pagecenter").scrollTop = 0;
        },
    }
};
</script>

<style scoped>
.pagetop table {
    font-size: 12px;
    border-collapse: separate;
    border-spacing: 5px;
    width: 100%;
}

.pagetop {
    left: 0;
    right: 0;
    height: 98px;
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    border: solid 1px #ccc;
    position: absolute;
    z-index: 99;
    overflow-x: auto;
    overflow-x: overlay;
    white-space: nowrap;
}

::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    border: 4px solid white;
}

::-webkit-scrollbar-thumb {
    background-color: #c1c1c1;
}

::-webkit-scrollbar-track {
    background-color: #f1f1f1;
}

.pagecenter {
    position: absolute;
    top: 103px;
    width: 100%;
    left: 0;
    bottom: 0px;
    overflow: auto;
    border: solid 1px #ccc;
    /* overflow-x: auto; */
}

.center-content table {
    width: 100%;
    font-size: 12px;
}

.pagecenter table tr {
    width: 100%;
}

.item-select {
    background-color: #b6e8ff;
}

.table-item {
    width: 100%;
    min-width: 1430px;
    overflow-y: auto;
    border-bottom: dashed 1px #cccccc;
}

.item-middle {
    font-size: 14px;
}

.item-text {
    margin-left: 15px;
    display: inline-block;
    color: #252525;
    line-height: 20px;
}

.cricle {
    width: 10px;
    height: 10px;
    background-color: #3cb371;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    display: inline-block;
    margin: 0 5px;
}

.item-result {
    background-color: #00ff00 !important;
}

.item-color {
    background-color: #c0c0c0 !important;
}

i {
    border: solid #c0c0c0;
    border-width: 0 1px 1px 0;
    display: inline-block;
    padding: 3px;
}

.right {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

.line-style {
    /* margin-left: 5px; */
    display: inline-block;
    color: #c0c0c0;
}

.grey-color {
    color: #676767;
}

::v-deep .pagetop .el-radio {
    margin-right: 12px;
}

.search-time {
    display: inline-block;
}

::v-deep .search-time input {
    width: 100% !important;
    padding: 0 !important;
    text-align: right !important;
}

::v-deep .search-time .el-select .el-input .el-select__caret {
    font-size: 0 !important;
    width: 0 !important;
}</style>